<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        使用CSS来修改元素的样式

        第二种方式:
            - 将样式编写到head中的style标签里
                然后通过CSS的选择器来选中元素并为其设置各种样式
                可以同时为多个标签设置样式，并且修改时只需要修改一处即可
            - 内部样式表更加方便对样式进行复用
            - 问题:
                我们的内部样式表只能对一个网页起作用
                    它里边的样式不能跨页面进行复用
    -->
    <style>
        /* 
            CSS的注释

            CSS的基本语法:
                选择器 声明块

                选择器，通过选择器可以选中页面的指定元素
                    比如 p 的作用就是选中页面中所有的 p 元素
                
                声明块，通过声明块来指定要为元素设置的样式
                    声明块由一个一个的声明组成
                    声明是一个名值对结构
                        一个样式名对应一个样式值，名和值之间以:连接，以;结尾
         */
        /* p{color:blanchedalmond; font-size: 30px;} */
    </style>

    <!-- 
        第三种方式（外部样式表）
            - 可以将CSS样式编写到一个外部的CSS文件中
                然后通过link标签来引入外部的CSS文件
            - 外部样式表需要通过link标签进行引入，
                意味着只要想使用这些样式的网页都可以对其进行引用
                使样式可以在不同页面之间进行复用
            - 将样式编写到外部的CSS文件中，可以最大限度的使用到浏览器的缓存机制
                从而加快网页的加载速度，提高用户的体验
    -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 
        网页分成三个部分
            结构(HTML)
            表现(CSS)
            行为(JavaScript)
        CSS
            - 层叠样式表
            - 网页是多层的结构，CSS可为每一层的元素设置样式
    -->
    <!-- 
        使用CSS来修改元素的样式

        第一种方式:
            - 在标签内部通过style属性来设置元素的样式
    -->
    <p style="color: blueviolet; font-size: 60px;">blue archive</p>
    <p>今天天气真不错</p>
</body>
</html>